<template>
  <div class="score">
    <span
      :class="item"
      v-for="(item, index) in stars"
      :key="index"
      class="stars"
      :style="{ width: size + 'px', height: size + 'px' }"
    ></span>
    <span class="text" v-if="isText">{{ score }}</span>
  </div>
</template>

<script>
export default {
  props: {
    score: Number,
    isText: {
      type: Boolean,
      default: true
    },
    size: {
      type: Number,
      default: 10
    }
  },
  computed: {
    stars() {
      const arr = [];
      const num = Math.floor(this.score.toFixed(1));

      for (let i = 0; i < num; i++) {
        arr.push('on');
      }

      if (!Number.isInteger(num)) {
        if (this.score * 10 - num * 10 <= 5) {
          arr.push('half');
        } else {
          arr.push('on');
        }
      }

      while (arr.length < 5) {
        arr.push('off');
      }
      return arr;
    }
  }
};
</script>

<style lang="less" scoped>
.score {
  .stars {
    display: inline-block;
    background-size: 100%;
  }
  .text {
    margin: 0 5px;
  }
}

.on {
  background: url('~@/assets/stars/star36_on@2x.png');
}
.half {
  background: url('~@/assets/stars/star48_half@2x.png');
}
.off {
  background: url('~@/assets/stars/star48_off@2x.png');
}
</style>
